<template>
    <div class="body">
        <div class="page-breadcrumb">
            <div class="pannel-title">
                <div>检测中心 / <font style="color:#4687FF">检测详情</font></div>
            </div>
            <div class="back-btn" v-if="$store.state.breadcrumb.isBack" @click="back">返回</div>
        </div>
        <!-- 详情回填 -->
        <div class="card-body">
            <!-- 单位信息 -->
            <div class="form-card">
                <div class="title">
                    检验报告
                    <a-button class="title-btn" type="primary" :loading="isloading" shape="round"  @click="onSubmit(formState)">保存</a-button>
                </div>
                <div class="body">
                    <a-form ref="form1" :model="formState" :rules="rules" :label-col="formConfig01.labelCol" :wrapper-col="formConfig01.wrapperCol">
                        <a-row>
                            <a-col :span="6">
                                <a-form-item label="被检单位" name="firmName">
                                    <a-input v-model:value="formState.firmName" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="6">
                                <a-form-item label="风险等级" name="severity">
                                    <a-input v-model:value="formState.severity" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="6">
                                <a-form-item label="所属辖区" name="psId">
                                    <a-select v-model:value="formState.psId" placeholder="please select your zone">
                                        <a-select-option v-for="item in psIds" :key="item" :value="item.id">{{ item.name }}</a-select-option>
                                    </a-select>
                                </a-form-item>
                            </a-col>
                            <!-- 第二排 -->
                            <a-col :span="6">
                                <a-form-item label="检测时间" name="inspectTime">
                                   <a-input v-model:value="formState.inspectTime" />
                                </a-form-item>
                                <a-form-item label="报告时间" name="createTime">
                                   <a-input v-model:value="formState.createTime" />
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                </div>
            </div>
        </div>
        <!-- 资产列表 -->
        <div class="card-body" >
            <div class="title">
                风险列表
                <span class="title-msg">
                    <font style="font-size: 14px;color: #999999;">上次更新时间：{{ assets.lastExecTime }}</font>
                </span>
            </div>
            <a-tabs style="margin-top:20px;" v-model:activeKey="activeKey" type="card">
                <a-tab-pane key="1" tab="端口开放">
                    <div class="form-card">
                        <span class="title-msg"
                            >( <font style="color:#4687FF"> {{ assets.ipCount }} </font> IP总数，
                            <font style="color:#4687FF"> {{ assets.assetCount }} </font> 资产总数 ) 有端口开放<font style="color:#4687FF">
                                {{ assets.portAssetOpenCount }} </font
                            >个 无端口开放<font style="color:#4687FF"> {{ assets.portAssetCloseCount }} </font>个 共检出端口<font style="color:#4687FF">
                                {{ assets.appAssetScanCount }} </font
                            >个 高危端口<font style="color:#4687FF"> {{ assets.portHighRiskCount }} </font>个
                        </span>
                        <div class="body">
                            <Grid :gridDatas="grid01" v-on:getTeg="doTheThing($event, this)" v-on:changePage="onChangePage($event, this)"></Grid>
                        </div>
                    </div>
                </a-tab-pane>
                <a-tab-pane key="2" tab="网站测绘" force-render>
                    <div class="form-card">
                        <span class="title-msg"
                            >( <font style="color:#4687FF"> {{ assets.urlCount }} </font> 网站总数，
                            <font style="color:#4687FF"> {{ assets.appAssetScanCount }} </font> 共检测资产总数 ) 有组件资产数<font style="color:#4687FF">
                                {{ assets.appAssetOpenCount }} </font
                            >个 无组件资产数<font style="color:#4687FF"> {{ assets.appAssetCloseCount }} </font>个
                        </span>
                        <div class="body">
                            <Grid :gridDatas="grid02" v-on:getTeg="doTheThing(e, this)" v-on:changePage="onChangePage($event, this)"></Grid>
                        </div>
                    </div>
                </a-tab-pane>
            </a-tabs>
        </div>
    </div>
</template>

<script>
import httpRequest from "@/util/httpRequest";
import Grid from "@/components/gridBody";
import baseUtil from "@/util/baseUtil";
import validator from "@/util/validator";
import { useStore } from "vuex";
import { message } from "ant-design-vue";
export default {
    name: "disktop",
    components: {
        Grid,
    },
    data() {
        return {
            id:this.$route.params.id,
            roleId:JSON.parse(localStorage.getItem("roleId")),
            assets: {},
            vulns: {},
            activeKey: "1",
            natureTypeIds: [],
            psIds: "",
            isloading:false,
            inspectLevels: [
                { id: "High", name: "重点单位" },
                { id: "Medium", name: "普通单位" },
            ],
            formConfig01: {
                labelCol: {
                    span: 6,
                },
                wrapperCol: {
                    span: 24,
                },
            },
            formConfig02: {
                labelCol: {
                    span: 3,
                },
                wrapperCol: {
                    span: 24,
                },
            },
            formState: {
                id: "",
                name: "",
                address: "",
                inspectLevel: "", // High重点企业,Medium普通企业
                status: "", // Enabled开启, Disabled关闭
                natureTypeId: "", //企业性质编号
                natureTypeName: "", // 企业性质名称
                psId: "", // 辖区派出所编号
                psName: "", // 辖区派出所名称
                resDepartment: "",
                contactName: "",
                contactMobile: "",
                contactEmail: "",
                urls: "", // 域名多个时[,]逗号分割
                ips: "", // IP多个时[,]逗号分割
                assetCount: "", // IP和域名总数
                bugCount: "", // 漏洞总数
                inspectCount: "", // 检验总数
                inspectTime: "", // 最后检验时间
                createTime: "",
                editTime: "",
            },
            rules: {
                name: {
                    required: true,
                    message: "不能为空",
                    trigger: "blur",
                },
                // address: {
                //     required: true,
                //     message: "不能为空",
                //     trigger: "blur",
                // },
                // inspectLevel: {
                //     required: true,
                //     message: "不能为空",
                //     trigger: "blur",
                // },
                // natureTypeId: {
                //     required: true,
                //     message: "不能为空",
                //     trigger: "change",
                //     type: "number",
                // },
                psId: {
                    required: true,
                    message: "不能为空",
                    trigger: "change",
                    type: "number",
                },
                // contactName: {
                //     required: true,
                //     message: "不能为空",
                //     trigger: "blur",
                // },
                contactMobile: [
                    // {
                    //     required: true,
                    //     message: "不能为空",
                    //     trigger: "blur",
                    // },
                    {
                        trigger: "blur",
                        validator: validator.mobile,
                    },
                ],
                // netSecDep: {
                //     required: true,
                //     message: "不能为空",
                //     trigger: "blur",
                // },
                // netSecName: {
                //     required: true,
                //     message: "不能为空",
                //     trigger: "blur",
                // },
                netSecMobile: [
                    // {
                    //     required: true,
                    //     message: "不能为空",
                    //     trigger: "blur",
                    // },
                    {
                        trigger: "blur",
                        validator: validator.mobile,
                    },
                ],
                netSecEmail: [
                    // {
                    //     required: true,
                    //     message: "不能为空",
                    //     trigger: "blur",
                    // },
                    {
                        trigger: "blur",
                        validator: validator.email,
                    },
                ],
                // urls: {
                //     required: true,
                //     message: "不能为空",
                //     trigger: "blur",
                // },
                // ips: {
                //     required: true,
                //     message: "不能为空",
                //     trigger: "blur",
                // },
            },
            pageData: {
                inspectLevel: "",
                keywords: "",
                pageNo: 1,
            },
            // 资产详情
            grid01: {
                pageData: {
                    gridType: 1,
                    total: 0,
                    current: 1,
                    firmId: this.$route.params.id,
                    keywords: "",
                    pageNo: "1",
                    pageSize: 10,
                },
                data: [],
                columns: [
                    {
                        title: "IP状态",
                        dataIndex: "offline",
                        key: "offline",
                        slots: {
                            customRender: "offline",
                        },
                    },
                    {
                        title: "IP",
                        dataIndex: "value",
                        key: "value",
                    },
                    {
                        title: "端口",
                        dataIndex: "port",
                        key: "port",
                    },
                    {
                        title: "服务协议",
                        dataIndex: "protocol",
                        key: "protocol",
                    },
                    {
                        title: "组件",
                        dataIndex: "layer",
                        key: "layer",
                        slots: {
                            customRender: "layers",
                        },
                    },
                    {
                        title: "原始数据",
                        dataIndex: "banner",
                        key: "banner",
                    },
                    {
                        title: "业务系统",
                        dataIndex: "banner",
                        key: "banner",
                    },
                ],
            },
            grid02: {
                pageData: {
                    total: 0,
                    gridType: 2,
                    current: 1,
                    firmId: this.$route.params.id,
                    keywords: "",
                    pageNo: "1",
                    pageSize: 10,
                },
                data: [],
                columns: [
                    {
                        title: "网站状态",
                        dataIndex: "offline",
                        key: "offline",
                        slots: {
                            customRender: "offline",
                        },
                    },
                    {
                        title: "主页地址",
                        dataIndex: "value",
                        key: "value",
                    },
                    {
                        title: "网站标题",
                        dataIndex: "title",
                        key: "title",
                    },
                    {
                        title: "组件",
                        dataIndex: "layer",
                        key: "layer",
                        slots: {
                            customRender: "layers",
                        },
                    },
                    {
                        title: "业务系统",
                        dataIndex: "banner",
                        key: "banner",
                    },
                ],
            },
            grid03: {
                pageData: {
                    total: 0,
                    gridType: 3,
                    current: 1,
                    firmId: this.$route.params.id,
                    keywords: "",
                    pageNo: "1",
                    pageSize: 10,
                },
                data: [
                    {
                        id: 5,
                        vulnName: "HTTP允许TRACE/TRACK方法",
                        vulnType: "Sys", // 脆弱点类型: Sys系统漏洞,App应用漏洞
                        status: "UnReported", // UnReported未通报, Reported已通报/待处理, Handled已处理/待上传, Uploaded已上传/待确认, Confirmed已确认
                        severity: "Medium", // 严重程度: Low低危,Medium中危,High高危
                        cnnvd: "CNNVD-200901-175,CNNVD-201001-256,CNNVD-200412-533",
                        cve: "CVE-2003-1567,CVE-2004-2320,CVE-2010-0386",
                        reportFile: null, // 报告文件
                        createTime: "2021-09-21 08:16:18",
                    },
                ],
                columns: [
                    {
                        title: "威胁名称",
                        dataIndex: "vulnName",
                        key: "vulnName",
                    },
                    {
                        title: "威胁等级",
                        dataIndex: "severity",
                        key: "severity",
                        slots: {
                            customRender: "severity",
                        },
                    },
                    {
                        title: "威胁类型",
                        dataIndex: "vulnType",
                        key: "vulnType",
                        slots: {
                            customRender: "vulnType",
                        },
                    },
                    {
                        title: "CVE编号",
                        dataIndex: "cve",
                        key: "cve",
                    },
                    {
                        title: "CNNVD编号",
                        dataIndex: "cnnvd",
                        key: "cnnvd",
                    },
                    {
                        title: "发现时间",
                        dataIndex: "createTime",
                        key: "createTime",
                    },
                    {
                        title: "操作",
                        key: "action",
                        slots: {
                            customRender: "action",
                        },
                    },
                ],
            },
        };
    },
    mounted() {
        console.log(this.id)
        console.log(this.roleId)
        const store = useStore();
        this.init();
        store.dispatch("setBreadcrumb", { text: "检测中心/检测详情", isBack: true });
        // this.init();
        httpRequest.post("企业性质集合(用于选择框)", {}).then((res) => {
            this.natureTypeIds = res.data.list;
        });
        httpRequest.post("角色集合", {}).then((res) => {
            this.psIds = res.data.list;
        });
        this.thisPostList(1);
        this.thisPostList(2);
        this.thisPostList(3);
    },
    methods: {
        init(){
            // let url = this.roleId == 1 ? '检验详情': '检验列表(单位详情)';
            httpRequest.post('检验详情', { id: this.id }).then((res) => {
                this.formState = res.data.detail;
                this.risk = res.data.risk;
            });
        },
        onChangePage: (teg, that) => {
            let page = {
                1: that.grid01,
                2: that.grid02,
                3: that.grid03,
            };
            page[teg.gridType].pageData = teg;
            that.thisPostList(teg.gridType);
        },
        onSubmit(formData) {
            Promise.all([this.$refs.form1.validate(), this.$refs.form2.validate(), this.$refs.form3.validate()]).then(() => {
                this.isloading = true;
                for (const key in formData) {
                    const element = formData[key];
                    formData[key] = element == null ? "" : element;
                }
                httpRequest
                    .post("编辑企业", formData)
                    .then(() => {
                        message.success("保存成功");
                    })
                    .finally(() => {
                        this.isloading = false;
                    });
            });
        },
        thisPostList(type) {
            let urlObj = {
                1: "企业详情-端口资产列表",
                2: "企业详情-网站测绘列表",
                3: "企业详情-漏洞列表",
            };
            let page = {
                1: this.grid01,
                2: this.grid02,
                3: this.grid03,
            };
            httpRequest.post(urlObj[type], page[type].pageData).then((res) => {
                page[type].data = res.data.list;
                page[type].pageData.current = page[type].pageData.pageNo = res.data.pageNo;
                page[type].pageData.total = res.data.pages * page[type].pageData.pageSize;
                for (let i = 0; i < page[type].data.length; i++) {
                    const item = page[type].data[i];
                    if (page[type].data.layer) {
                        page[type].data.layer = JSON.parse(item.layer);
                    }
                }
            });
        },
        back() {
            baseUtil.backPage(this);
        },
    },
};
</script>

<style lang="less" scoped>
.body {
    .card-body {
        padding: 30px;
        margin-top: 10px;
        background: #fff;
        text-align: left;
        .form-card {
            width: 100%;
            text-align: left;

            .body {
                margin-top: 10px;
            }
        }
        .title {
            font-size: 20px;
            font-weight: bold;
            color: #333333;
            border-left: 3px solid #4687ff;
            text-align: left;
            padding-left: 10px;
            &-msg {
                font-size: 16px;
            }
            &-btn {
                float: right;
                font-size: 14px;
                background: #4687ff;
                border-radius: 15px;
                color: #fff;
                .icon {
                    float: left;
                    margin-top: 2px;
                    margin-right: 4px;
                }
            }
            &-btnB {
                float: right;
                padding: 5px 15px;
                font-size: 14px;
                border: 1px solid #cccccc;
                border-radius: 15px;
                color: #333333;
                .icon {
                    float: left;
                    margin-top: 2px;
                    margin-right: 4px;
                }
            }
        }
    }
}
</style>
